;(function($,w,doc) {
    var config = {
        // 设置初始打开面板的年月日
        'defaultYear': '',
        'defaultMonth': '',
        'defaultDate': '',
        // 回调函数，选择数据后
        'chosenDate': ''
    };
    var DatePick = function(ele,option) {
        this.option = $.extend({},config,option);
        this.eleInput = ele;
        this.init();
    };
    DatePick.prototype = {
        init: function () {
            var wrap = $('#date-picker');
            // 第一次点击
            if(!wrap.length) {
                // 添加日期选择结构
                this.addElement().setBoxPosition();
                // 显示事件
                this.show();
                // 初始化日期表
                var option = this.option,
                    defaultYear = option.defaultYear,
                    defaultMonth = option.defaultMonth,
                    defaultDate = option.defaultDate,
                    now = new Date(),
                    nowYear = now.getFullYear(),
                    nowMonth = now.getMonth(),
                    nowDate = now.getDate(),
                    year = defaultYear !== '' ? defaultYear : nowYear,
                    month = defaultMonth !== '' ? defaultMonth - 1: nowMonth,
                    date = defaultDate !== '' ? defaultDate : nowDate;
                var data = new Date();
                    data.setFullYear(year);
                    data.setMonth(month);
                    data.setDate(date);
                // 初始化填充表格数据
                this.initFillDate(data);
                // 绑定日期跳转
                this.jumpToAnotherMonth();
                // 日期面板
                var that = this;
                $('.thisDate__year').click(function() {
                    that.changeYear()
                });
                $('.thisDate__month').click(function() {
                    that.changeMonth()
                });
                // 监听日期月份变化
                this.fillJumpData();
                // 选择后填充数据
                var afterChosen = this.option.chosenDate;
                if(typeof afterChosen == 'function') {
                    this.chosenDate(this.eleInput, afterChosen)
                } else {
                    this.chosenDate(this.eleInput);
                }
            }
        },
        show: function() {
            this.eleInput.click(function() {
                $('#date-picker').removeClass('dn');
            });
        },
        hide: function() {
            $('#date-picker').addClass('dn');
        },
        jumpToAnotherMonth: function() {
            var that = this;
            //console.log(that)
            $('.date-title__next,.date-title__prev').click(function() {
                var oTab = $('.date-table');
                if(!oTab.hasClass('dn')) {
                    var nMonth = $('.thisDate__month').text(),
                        nYear= $('.thisDate__year').text(),
                        date = new Date();
                    date.setFullYear(nYear);
                    date.setMonth(nMonth-1);
                    that.hasHowManyDate(date);
                    var way = $(this).hasClass('date-title__next') ? 'next':'prev';
                    that.getAnotherMonth(date,way);
                }
            });
            return this;
        },
        addElement: function() {
            var html = ' <div class="date dn" id="date-picker">\n' +
                '        <div class="date-title">\n' +
                '            <span class="date-title__prev"><</span>\n' +
                '            <span class="date-title__thisDate">\n' +
                '                <span class="thisDate__year"></span>年\n' +
                '                <span class="thisDate__month"></span>月\n' +
                '            </span>\n' +
                '            <span class="date-title__next">></span>\n' +
                '        </div>\n' +
                '        <table class="date-table">\n' +
                '            <thead>\n' +
                '            <tr>\n' +
                '                <td>日</td>\n' +
                '                <td>一</td>\n' +
                '                <td>二</td>\n' +
                '                <td>三</td>\n' +
                '                <td>四</td>\n' +
                '                <td>五</td>\n' +
                '                <td>六</td>\n' +
                '            </tr>\n' +
                '            </thead>\n' +
                '            <tbody>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            <tr>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '                <td></td>\n' +
                '            </tr>\n' +
                '            </tbody>\n' +
                '        </table>\n' +
                '        <div class="date__choose-date dn">\n' +
                '            <table>\n' +
                '                <tr>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                </tr>\n' +
                '                <tr>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                </tr>\n' +
                '                <tr>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                </tr>\n' +
                '                <tr>\n' +
                '                    <td><-</td>\n' +
                '                    <td></td>\n' +
                '                    <td></td>\n' +
                '                    <td>-></td>\n' +
                '                </tr>\n' +
                '            </table>\n' +
                '        </div>\n' +
                '    </div>';
            $('body').append(html);
            return this;
        },
        setBoxPosition: function() {
            var top = this.eleInput.offset().top,
                left = this.eleInput.offset().left,
                height = this.eleInput.height();
         /*   console.log(top)
            console.log(left)
            console.log(height)*/
            var viewHeight = document.querySelector('html').clientHeight;
            // console.log(viewHeight)
            /*if(top + 300 < viewHeight) {
            }*/
            var x = top + height + 5 + 'px',
                y = left + 'px';
            $('#date-picker').css({'top': x,'left': y});
            return this;
        },
        initFillDate:  function (date) {
            var today = date.getDate(),
                firstDay = this.getThisDay(date),
                lastDate = this.hasHowManyDate(date);
            var oTbody = $('.date-table > tbody'),
                aTd = oTbody.find('td'),
                len = aTd.length;
            for(var i = 0; i < len; i++) {
                var day = i + 1;
                var boxIndex = firstDay + i;
                // 如果没到该月最后一天
                if(day <= lastDate) {
                    if(day == today) {
                        $(aTd[boxIndex]).text(day)
                            .addClass('date-today')
                    }
                    else {
                        $(aTd[boxIndex]).text(day)
                            .removeClass('date-today');
                    }
                }
                if(i < firstDay || i >= lastDate + firstDay) {
                    $(aTd[i]).text('').removeClass('date-today');
                }
            }
            var year = date.getFullYear(),
                month = date.getMonth() + 1;
            $('.date-title__thisDate .thisDate__year').text(year);
            $('.date-title__thisDate .thisDate__month').text(month);
        },
        // 获取该月的第一天是星期几
        getThisDay: function (date) {
            var temp = new Date(date);
            temp.setDate(1);
            return temp.getDay();
        },
        // 获取该月最后一天
        hasHowManyDate: function (date) {
            var temp = new Date(date);
            temp.setDate(31);
    //        console.log(temp)
            var end = temp.getDate();
            switch (end) {
                case 1:
                    return 30;
                case 2:
                    return 29;
                case 3:
                    return 28;
                default:
                    return end;
            }
        },
        getAnotherMonth: function(date,way) {
            var month = date.getMonth(),
                year = date.getFullYear();
            if(way == 'prev') {
                if(month - 1 >= 0) {
                    date.setMonth(month - 1);
                }
                else {
                    date.setFullYear(year-1);
                    date.setMonth(11);
                }
            }
            else if(way == 'next') {
                if(month - 11 >= 0) {
                    date.setFullYear(year+1);
                    date.setMonth(0);
                }
                else {
                    date.setMonth(month + 1);
                }
            }
            this.initFillDate(date);
        },
        changeYear: function() {
            var oMonthTab = $('.date__choose-date');
            $('.date-table').toggleClass('dn');
            oMonthTab.toggleClass('dn')
                .attr('data-chose-type','year');
            var that = $(this),
                nMonth = parseInt(that.text());
            var nYear = $('.thisDate__year').text();
            // var date = new Date();
            var aTd = oMonthTab.find('table')
                .find('tr')
                .find('td');
            $.each(aTd,function(index,item) {
                var that = $(this),year = 0;
                if(index < 6) {
                    year = (+nYear - (6-index));
                    that.text(year).removeClass('date-today');
                }
                if(index < 12 && index >= 6) {
                    year = +nYear + (index - 6);
                    if(index === 6) {
                        that.text(year).addClass('date-today');
                    }
                    else {
                        that.text(year).removeClass('date-today');
                    }
                }
                else {
                    return
                }
            });
        },
        changeMonth: function() {
            $('.date-table').toggleClass('dn');
            var oMonthTab = $('.date__choose-date');
            oMonthTab.toggleClass('dn').attr('data-chose-type','month');
            if(!oMonthTab.hasClass('dn')) {
                var month = $('.thisDate__month').text();
                var aTd = oMonthTab.find('table')
                    .find('tr')
                    .find('td');
                $.each(aTd,function(index,item) {
                    var that = $(this),
                        num = (index+1);
                    if(num <= 12) {
                        that.text(num+'月').removeClass('date-today');
                    }
                    if(num === +month ) {
                        that.addClass('date-today')
                    }
                    if(num > 12) {
                        that.addClass('disabled');
                    }
                });
            }
        },
        fillJumpData: function() {
            var _this = this;
            var chooseDateTab = $('.date__choose-date');
            chooseDateTab.on('click','td',function() {
                var that = $(this);
                if(that.closest('tr').index() === 3) {
                    return
                }
                var date = new Date(),
                    nMonth = 0,nYear = 0;
                // 如果更改年份
                if(chooseDateTab.attr('data-chose-type') === 'year') {
                    nMonth = $('.thisDate__month').text();
                    nYear= parseInt(that.text());
                    date.setFullYear(nYear);
                    date.setMonth(nMonth-1);
                    _this.initFillDate(date);
                }
                // 如果更改月份
                else {
                    nYear = $('.thisDate__year').text();
                    nMonth = parseInt(that.text());
                    date.setFullYear(nYear);
                    date.setMonth(nMonth-1);
                    _this.initFillDate(date);
                }
                chooseDateTab.addClass('dn');
                $('.date-table').removeClass('dn');
            });
        },
        chosenDate: function(obj,func) {
            var _this = this;
            $('.date-table>tbody').on('click','td',function() {
                var that = $(this);
                that.closest('tbody')
                    .find('td')
                    .removeClass('date-today')
                    .end()
                    .end()
                    .addClass('date-today');
                var year = $('.thisDate__year').text(),
                    month = $('.thisDate__month').text(),
                    date = $('.date-table .date-today').text();
                var data = year + '-' + month + '-' + date;
                obj.val(data);
                _this.hide();
            });
        }
    };

    $.fn.datePick = function(option) {
        return new DatePick(this,option);
    }
}(jQuery,window,document));